<template>
	<div class="catalogs">
		 <div class="catalog" 
		 v-for="catalog in catalogs" 
		 :key="catalog.id"
		  v-if="catalog.show_in_nav==1"
		  @click="sendCatalogId(catalog.id)"
		  >
		 	{{catalog.cat_name}}
		 </div>
	</div>
</template>

<script>
	export default {
		props:{
			catalogs:{
				type:Array,
				required:true
			}
		},
		methods:{
			sendCatalogId(id){
				this.$emit("getcatalogid",id)
				//this.$emit("getCatalogId",id)		
			}
		}
	}
</script>

<style scoped>
	.catalogs{
		white-space: nowrap;
		overflow-x: scroll;
		height: 50px;
		line-height: 50px;
		border-bottom: 1px solid #C5C8C6;
	}
	.catalog{
		display: inline;
		padding: 0 10px;
		
	}
</style>
